<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div style="float: right;margin-right: 12px;margin-top: 15px;margin-bottom: 10px">
        <el-button type="primary"
                   size="mini"
                   @click="subjectLevy()">发起课题征集</el-button>
      </div>
      <div class="card-body">
        <el-table :data="tableData"
                  style="width: 100%"
                  row-key="id"
                  :row-class-name="tableRowClassName"
                  border
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  @selection-change="handleSelectionChange"
                  ref="subjectTreeTable">
          <el-table-column align="left"
                           label="名称"
                           width="500">
            <template slot-scope="scope">
              <div style="display:inline">
                {{scope.row.mainTitle?scope.row.mainTitle:scope.row.title}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="createTime"
                           label="发起时间"
                           :formatter="formatterTime">
          </el-table-column>
          <el-table-column align="center"
                           prop="targetDeptName"
                           label="反馈部门">
          </el-table-column>
          <el-table-column align="center"
                           prop="state"
                           label="状态"
                           width="80"
                           :formatter="formatterState">
          </el-table-column>
          <el-table-column align="center"
                           width="120">
            <template slot="header"
                      slot-scope="scope">
              <span>操作</span>
            </template>
            <template slot-scope="scope">
              <div class="menu-title"
                   @click.stop="viewLevyDeptAll(scope.row,scope.index)"
                   v-if="scope.row.mainTitle==null&&scope.row.state!='0'&&scope.row.state!='1'">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">查看反馈</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :page-sizes="[1, 2, 5, 10, 20, 30, 40 ,50]"
                         :current-page="page.currentPage"
                         :page-size="page.pageSize"
                         :total="page.total"
                         layout="total, sizes, prev, pager, next, jumper"
                         class="paginationcss">
          </el-pagination>
        </div>
      </div>
      <!--反馈详情弹窗-->
      <el-dialog title="反馈详情"
                 :visible.sync="dialogVisible"
                 width="1100px">
        <div style="margin-top: -18px">
          <avue-crud :data="subjectOpinionListData"
                     :option="tableoption"
                     :table-loading="tableLoading"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     @on-load="getResultList">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="agreeFeedback(scope.row,scope.index)" v-if="scope.row.adopt==null">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">采纳</p>
              </div>
              <div class="menu-title" @click.stop="disagreeFeedback(scope.row,scope.index)" v-if="scope.row.adopt==null">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">不采纳</p>
              </div>
            </template>
          </avue-crud>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
      <!--不采纳弹窗-->
      <el-dialog title="不采纳理由"
                 :visible.sync="dialogVisibleDisagree">
        <el-input type="textarea"
                  v-model="disagreeOpinion"
                  rows="3">
        </el-input>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="disagreeComitYes()">确 定</el-button>
          <el-button @click="dialogVisibleDisagree = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="附件详情" :visible.sync="viewFilesVisible" width="70%">
        <table class="bs-table">
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">课题名称</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.title}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">选题理由</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.reason}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">重点研究内容</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.important}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">联系人</th>
            <td class="bs-table_td">{{subjectOpinionDetail.contactName}}</td>
            <th class="bs-table_th" style="width: 200px">联系电话</th>
            <td class="bs-table_td">{{subjectOpinionDetail.contactNumber}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width:200px;">相关附件</th>
            <td class="bs-table_td" colspan="3">
              <div v-for="item in subjectOpinionDetail.files" :key="item">
                <el-link :href="'/planning/file/download/'+item.fileId" type="danger"
                >{{item.fileName}}
                </el-link>
              </div>
            </td>
          </tr>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewFilesVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import { getLevyResultList, getSubjectCollectionTreeList,getSubjectOpinBackList } from "@/api/subject";
import { opinionTagertList, agreeOpinionSubject, disagreeOpinionSubject, opinionTagert, formOpinion,getFormDetail } from "@/api/opinion";
import { getNotNull, getFileTypeFiles } from '@/views/util';
import fileTypeMixin from "@/mixins/fileTypeMixin";


export default {
  name: "subjectLevyResult",
  mixins: [fileTypeMixin],
  created () {
    window.viewFiles = this.viewFiles;
    this.putTableData();
  },
  data () {
    return {
      headerData: {
        title: '已征集规划列表'
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 2 // 每页显示多少条
      },
      dialogVisible: false,//反馈详情弹窗
      dialogVisibleDisagree: false,//不采纳弹窗
      targetIdTemp: 0,//用于采纳，不采纳，退回修改操作中传参
      disagreeOpinion: '',//不采纳理由
      subjectOpinionListData: [],
      pageBack: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      tableoption: {
        page: true,
        menuWidth: 170,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: false,
        cellBtn: false,
          indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        keyId: "id",
        column: [
          {
            label: "课题名称",
            prop: "title",
            overHidden:true,
            formatter: function (row, value, label, column) {
              return '<a style="cursor: pointer;" onclick="viewFiles(\'' + row.formId + '\')">' + value + '</a>';
            },
            cell: true
          },
          {
            label: "选题理由",
            prop: "reason",
            overHidden:true,
            cell: true
          },
          {
            label: "重点研究内容",
            prop: "important",
            overHidden:true,
            cell: true,
          },
          {
            label: "状态",
            prop: "adopt",
            cell: true,
            width:80,
            formatter: function (row, value, label, column) {
              if(row.adopt==null){
                return '已提交';
              }else if(row.adopt==true){
                return '已采纳';
              }else if(row.adopt==false){
                return '不采纳';
              }
            },
          },
        ]
      },
      opinionIdTemp:null,
      targetIdTempTwo:null,
      formIdTemp:null,
      viewFilesVisible:false,
      subjectOpinionDetail:{
        title: '',
        reason: '',
        important: '',
        contactNumber: '',
        contactName: '',
        files:[],
      },

      formatterTime: function (row, value, label, column) {
        if (row.createTime != null) {
          var data = row.createTime.split(' ');
          return data[0];
        }
      },
      formatterState: function (row, value, label, column) {
        if (row.state == '0') {
          return "催办";
        } else if (row.state == '1') {
          return "待反馈";
        } else if (row.state == '2') {
          return "退回";
        } else if (row.state == '3') {
          return "不采纳";
        } else if (row.state == '4') {
          return "已反馈";
        } else if (row.state == '5') {
          return "已采纳";
        }
      },
    }
  },
  methods: {
    viewFiles(formId){
      this.viewFilesVisible = true;
      getFormDetail(formId).then(async response =>{
        this.subjectOpinionDetail =response.data.data;
        if(response.data.data.fileIds.length>0){
          let files = await getFileTypeFiles(response.data.data.fileIds);
          this.subjectOpinionDetail.files = files;
        }
      })

    },
    // 课题详情跳转
    viewLevyDept (row) {
      let src = `/levyFeedback/detail/${row.collectionId}`;
      this.$router.push({
        path: src
      })
    },
    //查看反馈弹出反馈的详情
    viewLevyDeptAll (row) {
      this.opinionIdTemp = row.opinionId;
      this.targetIdTempTwo = row.targetId;
      formOpinion(Object.assign({
        current: 1,
        size: -1,
        opinionId: row.opinionId,
        targetId: row.targetId,
      })).then(async response => {
        this.subjectOpinionListData = response.data.data.records;
        this.pageBack.total = response.data.data.total;
      });
      this.dialogVisible = true;
    },
    // 发起课题征集跳转
    subjectLevy () {
      let src = `/subjectLevy/detail/${this.$route.params.id}`;
      this.$router.push({
        path: src
      })
    },
    putTableData () {
      getSubjectOpinBackList(Object.assign({
        current: 1,
        size: 2,
      })).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
      })
    },
    pageputTableData (page) {
      getSubjectOpinBackList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
      })).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
      })
    },
    handleSizeChange (val) {
      var page = this.page;
      page.pageSize = val;
      this.pageputTableData(page);
    },
    handleCurrentChange (val) {
      var page = this.page;
      page.currentPage = val;
      this.pageputTableData(page);
    },
    tableRowClassName ({ row, rowIndex }) {
      if (row.state == undefined) {
        return 'success-row';
      }
      return '';
    },

    getResultList(){

    },
    currentChange(currentPage) {
      var page = this.pageBack;
      page.currentPage = currentPage;
      this.getResultListPage(page);
    },
    sizeChange(pageSize) {
      var page = this.pageBack;
      page.pageSize = pageSize;
      this.getResultListPage(page);
    },
    getResultListPage(page){
      formOpinion(Object.assign({
        current: page.currentPage,
        size: -1,
        opinionId: this.opinionIdTemp,
        targetId: this.targetIdTempTwo,
      })).then(async response => {
        this.subjectOpinionListData = response.data.data.records;
        this.pageBack.total = response.data.data.total;
      });
    },

    // 采纳
    agreeFeedback (row) {
      this.$confirm("确定采纳?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        agreeOpinionSubject(row.formId).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: '成功',
              message: '采纳成功',
              type: 'success',
              duration: 2000
            });
            this.getResultListPage(this.pageBack);
          }
        })
      })
    },
    handleSelectionChange(){

    },
    // 不采纳弹框
    disagreeFeedback (row) {
      this.targetIdTemp = row.targetId;
      this.formIdTemp = row.formId;
      this.dialogVisibleDisagree = true;
    },
    // 不采纳
    disagreeComitYes () {
      if (!this.disagreeOpinion) {
        this.$notify({
          title: "提醒",
          type: "warning",
          message: "请填写不采纳理由!",
          duration: 2000
        });
        return
      }
      this.$confirm("确定不采纳?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        disagreeOpinionSubject(this.formIdTemp).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 2000
            });
            this.dialogVisibleDisagree = false;
            this.getResultListPage(this.pageBack);
          }
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.card-body {
  padding: 10px;
  min-height: 400px;
  padding-bottom: 65px;
}
.paginationcss {
  margin-top: 20px;
  float: right;
  margin-right: 28px;
}
</style>
